<template>
    <div class="container_home">
        <!-- home容器 -->
        <el-container>
        <el-header>
            <img src="../../assets/images/03-logo.png" alt="">
            <h1>黑马后台管理系统</h1>
            <el-button type="danger" @click="logout" class="logout">退出</el-button>
        </el-header>
        <el-container>
            <!-- 根据是否展开的值 控制菜单的宽度 -->
            <el-aside :style="{width: isColl ? '65px' : '200px'}">
                <!-- 切换是否锁紧 -->
                <div class="toggleBar" @click="isColl=!isColl">| | |</div>

                <!-- 左侧菜单栏 -->
                <el-menu
                default-active="2"
                background-color="#373d41"
                text-color="#fff"
                :router="true"
                :collapse-transition="false"
                :collapse="isColl"
                :unique-opened="true">

                    <!-- 菜单列表，根据数据循环 -->
                    <el-submenu :style="{width: isColl ? '65px' : '200px'}" :index="(i + 1).toString()" v-for="(item, i) in menu" :key="item.id">
                        <template slot="title">
                            <i :class="['iconfont', menuIcons[i]]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"><i class="el-icon-menu"></i>{{subItem.authName}}</el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main>
                <!-- 首页信息 -->
                <router-view></router-view>

            </el-main>
        </el-container>
        </el-container>
    </div>
</template>

<script>
// 混入自己的js文件
import mix from './home-mixins.js'
export default {
  mixins: [mix]
}
</script>

<style lang='less' scoped>
.container_home {
  width: 100%;
  height: 100%;
}

.toggleBar {
  text-align: center;
  color: #fff;
  line-height: 30px;
  background-color: #65727a;
  // 禁用用户选中
  user-select: none;
}

.el-container {
  height: 100%;
  width: 100%;
  .el-header {
    height: 60px;
    width: 100%;
    background-color: #373d41;
    img {
      margin-left: 15px;
      float: left;
    }
    .logout {
      float: right;
      margin-right: 50px;
      margin-top: 10px;
    }
    h1 {
      margin: 0;
      margin-left: 20px;
      float: left;
      color: #fff;
      font-weight: normal;
      line-height: 60px;
    }
  }
  .el-aside {
    background-color: #373d41;
    height: 100%;
  }
}
</style>
